<template>
    <div>
        <page-header title="查询任务与通知" content="Tasks and notifications" />

        <page-main>
            <el-tabs type="border-card">
                <el-tab-pane>
                    <span slot="label" style="font-size: 18px; font-weight: bold;">任务</span>
                    <div style="margin-bottom: 10px; font-size: 20px; font-weight: bolder;">
                        查看顺序：
                        <el-radio-group v-model="reverse">
                            <el-radio :label="false" border>校方优先</el-radio>
                            <el-radio :label="true" border>教师优先</el-radio>
                        </el-radio-group>
                    </div>
                    <el-timeline :reverse="reverse">
                        <el-timeline-item v-for="(item,index) in list" :key="index" :type="item.publisher== '校方'?'warning':'primary' " :timestamp="item.time" placement="top">
                            <el-card :body-style="card_body_style" @click.native="ToDetails(item)">
                                发布人：<el-tag :type="item.tagtype?'':'warning'">{{ item.publisher }}</el-tag>
                                <h3>
                                    {{item.message_title }}
                                </h3>
                            </el-card>
                        </el-timeline-item>
                        <el-timeline-item v-for="(item,index) in teacherlist" :key="index" :type="item.publisher== '教师'?'primary':'warning' " :timestamp="item.time" placement="top">
                            <el-card :body-style="card_body_style" @click.native="ToDetails(item)">
                                发布人：<el-tag>{{ item.publisher }}</el-tag>
                                <h3>
                                    {{item.message_title }}
                                </h3>
                            </el-card>
                        </el-timeline-item>
                    </el-timeline>
                </el-tab-pane>
                <el-tab-pane>
                    <span slot="label" style="font-size: 18px; font-weight: bold;">通知</span>
                    <div style="margin-bottom: 10px; font-size: 20px; font-weight: bolder;">
                        查看顺序：
                        <el-radio-group v-model="reverse">
                            <el-radio :label="false" border>校方优先</el-radio>
                            <el-radio :label="true" border>教师优先</el-radio>
                        </el-radio-group>
                    </div>
                    <el-timeline :reverse="reverse">
                        <el-timeline-item v-for="(item,index) in notice_list" :key="'task'+index" :type="item.publisher== '教师'?'primary':'warning' " :timestamp="item.time" placement="top">
                            <el-card :body-style="card_body_style" @click.native="ToDetails(item)">
                                发布人：<el-tag type="warning">校方</el-tag>
                                <h3>
                                    {{item.message_title }}
                                </h3>
                            </el-card>
                        </el-timeline-item>
                        <el-timeline-item v-for="(item,index) in teachernotice_list" :key="'notice'+index" :type="item.publisher== '教师'?'primary':'warning' " :timestamp="item.time" placement="top">
                            <el-card :body-style="card_body_style" @click.native="ToDetails(item)">
                                发布人：<el-tag>教师</el-tag>
                                <h3>
                                    {{item.message_title }}
                                </h3>
                            </el-card>
                        </el-timeline-item>
                    </el-timeline>
                </el-tab-pane>
            </el-tabs>
        </page-main>
    </div>
</template>

<script>
import PageMain from '../../components/PageMain/index'
import api from '@/api'
export default {
    name: 'Message',
    components: {PageMain},
    data() {
        return {
            reverse: true,
            list: [],
            teacherlist: [],
            notice_list: [],
            teachernotice_list: [],
            tagtype: true,
            show: true,
            card_body_style: {padding: '10px'},
            publisher: null
        }
    },
    computed: {
        isEdit() {
            return this.$store.state.settings.mode // 需要监听的数据
        }
    },
    watch: {
        isEdit() {
            if (this.$store.state.settings.mode == 'mobile') {
                this.show = false
            } else {
                this.show = true
            }
        }
    },
    created() {
        if (this.$store.state.settings.mode == 'mobile') {
            this.show = false
        } else {
            this.show = true
        }
        // 获取(校方-学生)任务列表信息
        api.post('studentMessage/findTask', { account: this.$store.state.user.account})
            .then(res => {
                this.list = res.data.schoolTask
                this.teacherlist = res.data.teacherTask
            })

        // 获取通知列表信息
        api.post('studentMessage/findNotice', { account: this.$store.state.user.account})
            .then(res => {
                this.notice_list = res.data.schoolNotice
                this.teachernotice_list = res.data.teacherNotice
            })
    },
    methods: {
        ToDetails(item) {
            console.log(item)
            this.$router.push({
                path: '/student/message_details',
                query: {
                    type: item
                }
            })
        }
    }

}
</script>
<style lang="scss" scoped>
    // 时间线
    ::v-deep .el-timeline {
        padding: 0;
    }
    ::v-deep .el-radio {
        margin: 2px;
    }
    ::v-deep .el-radio__label {
        font-size: 16px;
    }

</style>
